<!-- 绑定form表单：#f指向form生成的dom元素 -->
<!-- 友情提示：#f 变量的值，是 ngForm 指令的导出对象。 -->
<!-- ngModel语法3:
  ngModel - 直接使用 ngModel 指令，没有使用绑定或关联任何值。
  此时，ngModel 将自动关联表单控件的 name 属性，并使用该值作为 ngForm 对象的属性名。 -->
  <!-- tips: #userName - 指向 input 表单控件; #userName="ngModel" - 指向 NgModel 实例 -->
<form novalidate #f="ngForm" (ngSubmit)="onSubmit(f)">
  <div class="form-group">
    <label>用户名：</label>
    <input type="text" name="name" class="form-control" placeholder="请输入用户名" ngModel required minlength="6" #userAccount="ngModel">
  </div>
  <!-- 显示异常信息的代码： -->
   <!--形式一:  f.controls-->
  <!-- <div *ngIf="f.controls.name?.required" class="error">用户名是必须的！</div> -->
  <!-- 形式二: 利用#userAccount 绑定到 ngModel -->
  <!-- tips: userAccount.touched 表单控件已被访问过-->
  <div *ngIf="userAccount.errors?.required && userAccount.touched" class="error">用户名是必须的！</div>
  <div *ngIf="userAccount.errors?.minlength && userAccount.touched" class="error">长度不能少于6位！</div>

  <!-- ngModel语法1： [ngModel]="user.name" -->
  <!-- <div class="form-group">
    <label>用户名：</label>
    <input type="text" name="name" class="form-control" placeholder="full name" [ngModel]="user.name">
  </div> -->

  <!-- ngModel语法2:  [(ngModel)]="user.name"-->
  <!-- <div class="form-group"> -->
    <!-- <label>用户名：</label> -->
    <!-- <input type="text" name="name" class="form-control" placeholder="full name" [(ngModel)]="user.name"> -->
    <!-- 相当于, [(ngModel)]是组件input 和 output的语法糖 -->
    <!-- <input type="text" name="name" class="form-control" placeholder="full name" [ngModel]="user.name" (ngModelChange)="user.name = $event"> -->
  <!-- </div> -->

<!--ngModelGroup="account" 把一组ngModel绑定到一个对象上，形成嵌套关系  -->
  <div class="" ngModelGroup="account" #usernameAccount="ngModelGroup">
    <div class="form-group">
      <label>邮箱地址：</label>
      <input type="email" name="email" class="form-control" placeholder="请输入邮箱" ngModel required>
    </div>
    <div class="form-group">
      <label>确认邮箱：</label>
      <input type="email" name="confirm" class="form-control" placeholder="请确认邮箱" ngModel required>
    </div>
  </div>
  <!-- tips: 验证多个ngModel形成的ngModelGroup, 需要判断ngModelGroup绑定对象的 invalid-->
  <div *ngIf="usernameAccount.invalid && usernameAccount.touched" class="error">两个邮箱都是必须的！</div>
  <button type="submit" [disabled]="f.invalid" class="btn btn-primary">Sign up</button>
</form>

<!-- 查看表单的值 -->
<div class="form-value">
  表单绑定#f的值：
  <span>{{f.value | json}}</span>
</div>
<div class="form-value">
  表单验证的值：
  <!-- f.controls.name?.errors 的值是 null 或 undefined 时，表示验证成功。 -->
  <!-- 友情提示：?.prop 称为安全导航操作符，用于告诉 Angular prop 的值可能不存在。 -->
  <span>{{f.controls.name?.errors | json}}</span>
</div>

<!-- 查看组件对应的user的值： -->
<div class="form-value">
    组件绑定的值：
    <span>{{user | json}}</span>
  </div>
